@import '../variables.css';

.mclContainer {
  display: flex;
  flex-direction: column;

  &:focus {
    outline: none;
  }
}

.mclHeightSpacer {
  position: relative;
}

.mclRowContainer {
  position: absolute;
  min-width: 100%;

  /* first descendants all display: block for height measurment */
  & > * {
    display: block;
  }
}

/* Row is interactive (clickable, hoverable and focusable etc.) */
.mclIsInteractive {
  composes: interactionStyles hasDot focusDotPositionStart from "../sharedStyles/interactionStyles.css";
}

.mclRowFormatterContainer {
  position: absolute;
  width: 100%;
}

.mclRow {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  color: var(--color-text);
  text-decoration: none;
  outline: none;
  background-color: var(--color-fill-table-row-even);

  &:visited {
    color: var(--color-text);
  }

  /* Different bg on odd rows */
  &.mclIsOdd:not(.mclSelected) {
    background-color: var(--color-fill-table-row-odd);
  }

  &::before {
    border-radius: 0;
  }

  /* Selected style */
  &.mclSelected {
    color: #fff;
    background-color: var(--color-fill-current);

    /** For universal interaction styling */
    &::after {
      background-color: #fff;
    }
  }

  &.mclWrappedCells {
    flex-wrap: wrap;
  }
}

.mclRowsBody {
  padding: 0 6px 3px;

  /* Use monospaced numbers, aka Tabular Numerals (tnum) */
  font-feature-settings: 'tnum';
  -webkit-font-feature-settings: 'tnum';
  -moz-font-feature-settings: 'tnum';
}

.mclHeaderContainer {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  overflow: hidden;
  width: 100%;
}

.mclHeaderRow {
  display: flex;
  justify-content: flex-start;
  border-bottom: 5px solid var(--primary);

  &.mclHScroll {
    overflow: auto;
  }
}

.mclHeader {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  flex-grow: 0;
  padding: var(--gutter-static-two-thirds) var(--gutter-static-two-thirds) var(--gutter-static-one-third) var(--gutter-static-two-thirds);
  font-weight: var(--text-weight-bold);
  font-size: var(--font-size-medium);
  color: var(--color-text);

  &.mclClickable {
    cursor: pointer;
  }

  & .mclHeaderInner {
    display: flex;
    padding: 2px 0;
    align-items: center;

    &::after {
      content: '';
      flex: 1 0 var(--gutter-static);
      width: var(--gutter-static);
      margin: 0 2px;
    }

    &:active,
    &:focus {
      outline: none;
    }
  }

  &.mclAscending .mclHeaderInner::after {
    content: '';
    flex: 1 0 var(--gutter-static);
    height: var(--gutter-static);
    width: var(--gutter-static);
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20class%3D%22stripes__icon%22%20d%3D%22M7%202.9l5.77%206.92-1.54%201.28L7%206.02%202.77%2011.1%201.23%209.82%207%202.9z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    margin: 0 2px;
  }

  &.mclDescending .mclHeaderInner::after {
    content: '';
    flex: 1 0 var(--gutter-static);
    height: var(--gutter-static);
    width: var(--gutter-static);
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20class%3D%22stripes__icon%22%20d%3D%22M7%2011.1L1.23%204.18%202.77%202.9%207%207.98l4.23-5.08%201.54%201.28L7%2011.1z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    margin: 0 2px;
  }

  &.mclSorted .mclHeaderInner {
    text-decoration: underline;
  }
}

.mclHeaderOuter:active,
.mclHeaderOuter:focus {
  outline: none;
}

/**
* Functional cell styles
*/
.mclCell {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: auto;
  overflow: hidden;
  text-align: left;
  word-break: break-word;

  &.showOverflow {
    overflow: visible;
  }
}

/**
* Default cell styles
*/
.mclCellStyle {
  line-height: var(--line-height);
  padding: var(--gutter-static-one-third) var(--gutter-static-two-thirds);
  min-height: var(--control-min-size-desktop);
  border-right: 1px solid var(--color-border-p2);

  &:last-child {
    border-right: 0;
  }
}

[dir="rtl"] .mclCellStyle {
  border-right: 0;
  border-left: 1px solid var(--color-border-p2);

  &:last-child {
    border-left: 0;
  }
}

.mclScrollable {
  flex-grow: 1;
  flex-shrink: 0;
  overflow: auto;
  width: 100%;
}

.mclContentLoadingRow {
  width: 100%;
  display: flex;
  position: absolute;
  justify-content: flex-end;
  padding: 0 20px;
  bottom: 18px;
  pointer-events: none;
}

.mclContentLoading {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 1.5rem;
  width: 3rem;
  padding: 0.25rem 0.5rem 0 0;
  background-color: rgba(255, 255, 255, 0.5);
}

.mclEmptyMessage {
  padding: 1rem;
}

.mclEndOfListContainer {
  position: absolute;
  overflow: hidden;
}

.mclCenteredContainer {
  position: relative;
  left: 0;
}

.mclEndOfList {
  color: var(--color-text-p2);
  padding: var(--gutter-static-two-thirds) 0;
}

/* loader rows */
.mclLoaderRow {
  width: 100%;
  position: absolute;
  top: 100%;
  overflow: hidden;
}

.mclRowPlaceholder {
  content: "&nbsp;";
  border-radius: 2px;
  background-color: var(--color-fill-table-row-odd);
  width: 100%;
  height: 1rem;
}

/**
 * Has margin
 * This is mostly relevant in results lists to achieve
 * the correct spacing inside the pane without having blank areas around the MCL
 */

.hasMargin {
  & .mclHeaderRow,
  & .mclRow {
    margin: 0 var(--gutter-static);
  }
}
